<template>
  <drawer :show="edit || content" :styles="{width:'700px'}" pos="right" tran="push" @change-show="changeDrawerShow">
    <div slot="drawer" style="height:100%">
      <edit v-if="edit" :id="selectTable.articleId" @getData="getData" @close="edit=false"></edit>
      <acontent v-if="content" :data="selectTable" @close="content=false"></acontent>
    </div>
    <div class="app-container">
      <div class="catetree">
        <el-scrollbar class="scroller" wrapClass="scrollbar-wrapper" style="height:100%;">
          <div class="catetreebox">
            <el-input placeholder="输入关键字" v-model="filterText" clearable>
            </el-input>
            <el-tree v-loading="catePload" class="filter-tree" @node-click="nodeClick" :expand-on-click-node="false" :data="cateData" node-key="columnId" :props="{
              children: 'children',
              label: 'columnName'
            }" default-expand-all highlight-current :filter-node-method="filterNode" ref="tree">
            </el-tree>
          </div>
        </el-scrollbar>
      </div>

      <div class="list">
        <div class="filter-container">
          <el-input class="filter-item" @keyup.enter.native="handleFilter" style="width: 200px;" placeholder="请输入关键词" v-model="search.keyword"></el-input>
          <div class="filter-item">
            <span class="txt">状态</span>
            <el-select v-model="search.auditType" placeholder="请选择" style="width:100px">
              <el-option label="全部" value=''></el-option>
              <el-option v-for="(item,index) in auditArr" :key="index" :label="item" :value="index">
              </el-option>
            </el-select>
          </div>
          <div class="filter-item">
            <span class="txt">置顶</span>
            <el-select v-model="search.isStick" placeholder="请选择" style="width:100px">
              <el-option label="全部" value=''></el-option>
              <el-option v-for="(item,index) in ['未置顶','置顶']" :key="index" :label="item" :value="index">
              </el-option>
            </el-select>
          </div>
          <div class="filter-item">
            <span class="txt">创建时间</span>
            <el-date-picker style="width: 240px;" value-format="timestamp" v-model="search.date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <el-button class="filter-item" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
        </div>
        <el-table v-loading="!pload" @selection-change="selectionChange" ref="multipleTable" border :data="tableData">
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column property="articleId" label="Id" align="center" show-overflow-tooltip width="100">
          </el-table-column>
          <el-table-column label="标题" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag size="mini" v-if="scope.row.isStick">置顶</el-tag>
              {{scope.row.headline}}
            </template>
          </el-table-column>
          <el-table-column label="审核" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              {{auditArr[scope.row.auditType]}}
            </template>
          </el-table-column>
          <el-table-column property="columnName" label="类别" align="center" show-overflow-tooltip width="150">
          </el-table-column>
          <el-table-column property="author" label="发布人" align="center" show-overflow-tooltip width="100">
          </el-table-column>
          <el-table-column label="添加日期" align="center" width="180" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleView(scope.row)">详情</el-button>
              <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="filter-bottom">
          <el-button-group class="filter-item">
            <el-button @click="toggleSelection(-1)">全选</el-button>
            <el-button @click="toggleSelection(0)" :disabled="!selection.length">反向选择</el-button>
            <el-button @click="toggleSelection(1)" :disabled="!selection.length">取消选择</el-button>
          </el-button-group>
          <el-button-group class="filter-item">
            <el-button type="success" @click="toggleRecover" :disabled="!selection.length">恢复</el-button>
            <el-button type="danger" @click="toggleDel" :disabled="!selection.length">删除</el-button>
            <el-popover placement="top" width="300" v-model="isStickShow">
              <p>请选择</p>
              <p>
                <el-radio-group v-model="isStick">
                  <el-radio :label="0">取消置顶</el-radio>
                  <el-radio :label="1">设为置顶</el-radio>
                </el-radio-group>
              </p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="isStickShow = false">取消</el-button>
                <el-button type="primary" size="mini" @click="stick">确定</el-button>
              </div>
              <el-button slot="reference" :disabled="!selection.length">置顶</el-button>
            </el-popover>
            <el-popover placement="top" width="300" v-model="tjShow">
              <p>请选择</p>
              <p>
                <el-select v-model="locationLevel" placeholder="请选择">
                  <el-option v-for="(i,index) in 5" :key="index" :label="i+'级推荐'" :value="index">
                  </el-option>
                </el-select>
              </p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="tjShow = false">取消</el-button>
                <el-button type="primary" size="mini" @click="tj">确定</el-button>
              </div>
              <el-button slot="reference" :disabled="!selection.length">推荐</el-button>
            </el-popover>
            <el-popover placement="top" width="300" v-model="auditTypeShow">
              <p>请选择</p>
              <p>
                <el-radio-group v-model="auditType">
                  <el-radio :label="index" :key="index" v-for="(item,index) in auditArr">{{item}}</el-radio>
                </el-radio-group>
              </p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="auditTypeShow = false">取消</el-button>
                <el-button type="primary" size="mini" @click="check">确定</el-button>
              </div>
              <el-button slot="reference" :disabled="!selection.length">审核</el-button>
            </el-popover>
          </el-button-group>

        </div>
        <div class="pagination-container">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="limit" :page-sizes="limits" background layout="sizes, prev, pager, next, jumper, total" :total="count">
          </el-pagination>
        </div>
      </div>
    </div>
  </drawer>
</template>

<script>
import { cateTree, artList, artDelete, artUpdate, artStick, artRecover } from '@/utils/api'
import waves from '@/directive/waves' // 水波纹指令
import edit from './edit'
import acontent from './content'
export default {
  directives: {
    waves
  },
  data() {
    return {
      auditArr: ['已发布', '待审核', '草稿箱'],
      isStick: 0,
      isStickShow: false,
      locationLevel: 0,
      tjShow: false,
      auditType: 0,
      auditTypeShow: false,
      content: false,
      filterText: '',
      cateData: [],
      tableData: [],
      search: {
        keyword: '',
        auditType: ''
      },
      selection: [],
      selectTable: {},
      catePload: false,
      pload: false,
      edit: false,
      currentPage: 1,
      limit: 20,
      limits: [10, 20, 50, 100],
      count: 0
    }
  },
  components: {
    edit,
    drawer: () => import('@/components/Drawer'),
    acontent
  },
  created() {
    this.getCate()
    this.getData()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    'search.auditType'(val) {
      this.getData()
    },
    'search.isStick'(val) {
      this.getData()
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.columnName.indexOf(value) > -1
    },

    selectionChange(selection) {
      this.selection = selection
    },
    toggleSelection(s) {
      if (s === -1) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row, true)
        })
      }
      if (s === 0) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      }
      if (s === 1) {
        this.$refs.multipleTable.clearSelection()
      }
    },
    async handleDelete(index, row) {
      this.$confirm('确认要从回收站删除吗', { type: 'warning' }).then(async() => {
        try {
          this.pload = true
          await artDelete({ articleIds: row.articleId })
          this.$notify({ title: '操作成功', type: 'success', duration: 5000 })
          this.getData()
        } catch (e) {
          this.pload = false
        }
      })
    },
    toggleDel() {
      this.$confirm('确认要从回收站删除吗', { type: 'warning' }).then(async() => {
        const ids = this.selection.map((i, index) => {
          return i.articleId
        }).join(',')
        try {
          this.pload = true
          await artDelete({ articleIds: ids })
          this.$notify({ title: '操作成功', type: 'success', duration: 5000 })
          this.getData()
        } catch (e) {
          this.pload = false
        }
      })
    },
    toggleRecover() {
      this.$confirm('确认要从回收站恢复吗', { type: 'warning' }).then(async() => {
        const ids = this.selection.map((i, index) => {
          return i.articleId
        }).join(',')
        try {
          this.pload = true
          await artRecover({ articleIds: ids })
          this.$notify({ title: '操作成功', type: 'success', duration: 5000 })
          this.getData()
        } catch (e) {
          this.pload = false
        }
      })
    },
    handleView(row) {
      this.selectTable = row
      this.content = true
    },
    handleAdd() {
      this.selectTable = { articleId: 0 }
      this.edit = true
    },
    handleEdit(index, row) {
      this.selectTable = { articleId: row.articleId }
      this.edit = true
    },
    async getCate() {
      const data = this.JSONo(
        {},
        this.search
      )
      this.catePload = true
      const Datas = await cateTree(data)
      this.cateData = [{
        children: [],
        columnName: '全部',
        columnId: null
      }].concat(Datas)
      this.catePload = false
    },
    async getData() {
      if (this.search.date) {
        this.search.createTimeStart = this.search.date[0]
        this.search.createTimeEnd = this.search.date[1]
      } else {
        delete this.search.createTimeStart
        delete this.search.createTimeEnd
      }
      const data = this.JSONo(
        {
          delTag: 1,
          pageNum: this.currentPage,
          pageSize: this.limit,
          auditTypes: this.search.auditType
        },
        this.search
      )
      delete data.auditType
      this.pload = false
      const Datas = await artList(data)
      this.tableData = Datas.data
      this.count = Datas.pageInfo.total
      this.pload = true
    },
    async stick() {
      const ids = this.selection.map((i, index) => {
        return i.articleId
      }).join(',')
      const data = {
        articleIds: ids,
        isStick: this.isStick
      }
      await artStick(data)
      this.$notify({ title: '操作成功', type: 'success', duration: 3000 })
      this.getData()
      this.isStickShow = false
    },
    async tj() {
      const ids = this.selection.map((i, index) => {
        return i.articleId
      }).join(',')
      const data = {
        articleIds: ids,
        locationLevel: this.locationLevel
      }
      await artUpdate(data)
      this.$notify({ title: '操作成功', type: 'success', duration: 3000 })
      this.getData()
      this.tjShow = false
    },
    async check() {
      const ids = this.selection.map((i, index) => {
        return i.articleId
      }).join(',')
      const data = {
        articleIds: ids,
        auditType: this.auditType
      }
      await artUpdate(data)
      this.$notify({ title: '操作成功', type: 'success', duration: 3000 })
      this.getData()
      this.auditTypeShow = false
    },
    handleFilter() {
      this.currentPage = 0
      this.getData()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.limit = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
    nodeClick(a, b) {
      this.search.columnId = a.columnId
      this.currentPage = 0
      this.getData()
    },
    changeDrawerShow(state) {
      this.edit = state
      this.content = state
      console.log(state)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  overflow: hidden;
  padding: 0 0 0 200px;
  .list {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
  }
}
</style>
